<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加和删除类名</title>
    <style>
        .bc1{color:blue;font-size:16px;}
        .bc2{color:red;font-size:24px;}
        .bc3{width:200px;height:100px;border:2px solid yellow}
    </style>
</head>
<body>
    <div id="byxbc" class="bc1">
        一定不要学编程
    </div>
    <script>
        var a = document.getElementById('byxbc');
        document.write('<p style="color:red;">给行内元素添加类名：a.classList.add("bc3")<br></p>');
        document.write('<p style="color:red;">注：已有类名，则不会被添加，也不会报错。<br></p>');
        a.classList.add('bc2');
        document.write('<p style="color:red;">删除类名：a.classList.remove("bc1")<br></p>');
        a.classList.remove('bc3');
    </script>
</body>
</html>